<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/common.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>


    <script src="./js/common.js"></script>
</head>

<body>
    <div class="main p24 border_box">
        <div class="top flex_x between color_ff">
            <span class="iconfont font_24">&#xe601;</span>
            <span class="iconfont font_24">&#xe8c4;</span>
        </div>
        <div class="font_13 txt_center color_ff mt_10">play from playlist</div>
        <div class="margin0 txt_center">
            <div class="txt_center mt_20 th_bg algin_center">
                <img class="thb margin0" src="./static/image/Rectangle 65.png" alt="">
            </div>
        </div>
        <div class="color_ff">
            <div class="mt_60">Thinking Out Loud</div>
            <div class="mt_10 font_13">Ed Sheeran</div>
        </div>
        <div class="mt_60 heart">
            <img src="./static/image/Vector 112.svg" alt="">
        </div>
        <div class="mt_60 jd">
            <img class="margin0" src="./static/image/Snipaste_2023-11-29_00-18-44.png" alt="">
        </div>
        <div class="times flex_x between color_ff mt_20 font_12">
            <span>01:30</span>
            <span>02:34</span>
        </div>
        <div class="tagsl color_ff flex_x around mt_60 algin_center">
            <span class="iconfont font_40">&#xe62b;</span>
            <span class="iconfont font_40">&#xe84f;</span>
            <span class="iconfont font_60 pause btns">&#xe624;</span>
            <span class="iconfont font_40">&#xe7eb;</span>
            <span class="iconfont font_40">&#xe623;</span>
        </div>
        <div class="mt_60 txt_center color_ff lyrics">
            <span class="iconfont font_24">&#xe65d;</span>
            <div class="mt_20">swipe for lyrics</div>
        </div>
    </div>
    <div class="main2">
        <div class=" txt_center color_ff lyrics">
            <div class="mt_60 ">swipe for lyrics</div>
            <span class="iconfont font_24">&#xe601;</span>

        </div>
        <div class="ly txt_center color_ff">
            <div class="font_24 mt_20">Thinking Out Loud</div>
            <div class="font_13 mt_60">Ed Sheeran</div>
            <div class="font_13" style="line-height: 30px;">
                Maybe just the touch of a <br>
                hand Oh me I fall in love with you <br>
                 every single day <br>
                  And I just wanna tell you 
                I am <br>
                 So honey now <br>
                  <div class="pur">
                    Take me into your
                  </div> 
                  <div class="pur">
                    loving arms
                  </div> Kiss me under the light of a 
                   thousand stars <br>
                    Place your<br>
                head on my <br>
                beating heart <br>
                I'm thinking out loud
            </div>
        </div>
        <div class="mt_60 jd margin0 txt_center">
            <img class="margin0" src="./static/image/Snipaste_2023-11-29_00-18-44.png" alt="">
        </div>
        <div class="times flex_x between color_ff mt_20 font_12 p24">
            <span>01:30</span>
            <span>02:34</span>
        </div>
        <div class="tagsl color_ff flex_x around mt_60 algin_center">
            <span class="iconfont font_40">&#xe62b;</span>
            <span class="iconfont font_40">&#xe84f;</span>
            <span class="iconfont font_60 pause btns">&#xe624;</span>
            <span class="iconfont font_40">&#xe7eb;</span>
            <span class="iconfont font_40">&#xe623;</span>
        </div>
    </div>
</body>

</html>
<script>
    gsap.to(".thb", {
        rotation: 360,
        duration: 100,
        repeat: -1,
        yoyo: false,
    });
    $(function () {
        $('.lyrics').click(function () {
            gsap.to(".main", {
                duration: 0.5,
                opacity: 0,
                y: -1000,
                stagger: 0.1,
                ease: "back.in",
            });

            setTimeout(() => {
                $('.main').hide()
                $('.main2').show(1000, 'linear')
            }, 1000);
        })
    })
</script>
<style>
    .main2 {
        background-image: url("./static/image//WechatIMG11095\ 2.png");
        background-repeat: no-repeat;
        background-size: cover;
        width: 100vw;
        height: 100vh;
        display: none;
    }

    .main {
        background-image: url("./static/image/bgRectangle\ 28.png");
        background-repeat: no-repeat;
        background-size: cover;
        width: 100vw;
        height: 100vh;

    }

    .thb {
        width: 180px;
        height: 180px;
        border-radius: 50%;
        /* border: 10px solid #40343c; */
        margin: 0 auto;
        margin-top: 24px;

    }

    .th_bg {
        background-image: url("./static/image/imgbin_bubble-transparency-and-translucency-png\ 10.png");
        background-repeat: no-repeat;
        background-size: cover;
        width: 220px;
        height: 220px;
        margin: 0 auto;
        margin-top: 20px;
    }

    .jd img {
        width: 90VW;

    }

    .heart {
        text-align: right;
    }

    .heart img {
        width: 24px;
        height: 24px;
    }
    .pur{
        font-size: 28px;
        color: #dbb0f6;
    }